<template>
  <div class="all-edit">
    <el-dialog
    :visible.sync="dialogVisible"
    width="70%"
    :before-close="handleClose"
    :close-on-click-modal="false"
    >
      <Editor :height="400" :value="editVal" @on-change="editChange"/>
      <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="handleClose">取 消</el-button>
          <el-button size="mini" type="primary" v-if="isAgainInp" @click="onSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Editor from '@/components/Editor'
export default {
  components: {
    Editor
  },
  props: {
    dialogVisible: {
        type: Boolean,
        default: false
    },
    editVal: {
      type: String,
      default: ''
    }
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        // this.title = ''
        // this.editHtml = ''
        // this.editText = ''
        // this.editVal = null
        this.isAgainInp = false
      }
    },
    editVal(val) {
      this.title = val.title
    }
  },
  data() {
    return {
      editHtml: '',
      editText: '',
      isAgainInp: false
    }
  },
  methods: {
    editChange({ html, text }) {
      this.isAgainInp = true
      this.editHtml = html
      this.editText = text
    },
    handleClose() {
      this.$emit('close', false)
    },
    onSure() {
      let data = {}
      // if(this.isAgainInp){
        data = {
          html: this.editHtml,
          text: this.editText
        }
      // }else{
      //   data ={
      //     html: this.editVal.editorContent
      //   }
      // }
      this.$emit('sure', data)
    }
  }
}
</script>
<style lang="scss" scoped>
.all-edit{
  .el-input{
    margin-bottom: 10px;
  }
}
</style>
